<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, width=device-width">
    <title></title>

    <link href="css/style.css" rel="stylesheet">
	<link href="lib/angular-material/angular-material.css" rel="stylesheet">
    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- angularjs js -->
    <script src="lib/angular/angular.js"></script>
	<script src="lib/angular-ui-router/release/angular-ui-router.js"></script>
	<script src="lib/angular-aria/angular-aria.js"></script>
	<script src="lib/angular-animate/angular-animate.js"></script>
	<script src="lib/angular-material/angular-material.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>
    <script src="js/routers.js"></script>
  </head>
  <body ng-app="starter" ng-controller="AppCtrl" >
  <div class="buttondemoBasicUsage">
    <md-toolbar>
      <div class="md-toolbar-tools">
        <md-button class="md-icon-button" aria-label="Settings" ng-click="toggleLeft()">
          <md-icon md-svg-icon="img/icons/menu.svg"></md-icon>
        </md-button>
        <h2>
          <span>Toolbar with Icon Buttons</span>
        </h2>
        <span flex></span>
        <md-button class="md-icon-button" aria-label="Favorite">
          <md-icon md-svg-icon="img/icons/favorite.svg" style="color: greenyellow;"></md-icon>
        </md-button>
        <md-button class="md-icon-button" aria-label="More">
          <md-icon md-svg-icon="img/icons/more_vert.svg"></md-icon>
        </md-button>
      </div>
    </md-toolbar>
    <div layout="row" flex>
    <md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">
      <md-toolbar class="md-theme-indigo">
        <h1 class="md-toolbar-tools">Sidenav Left</h1>
      </md-toolbar>
      <md-content layout-padding>
        <p hide-md show-gt-md>
          This sidenav is locked open on your device. To go back to the default behavior,
          narrow your display.
        </p>
      </md-content>
    </md-sidenav>
    <md-content class="md-default-theme">
      <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
        <md-button>{{title1}}</md-button>
        <md-button md-no-ink class="md-primary">Primary (md-noink)</md-button>
        <md-button ng-disabled="true" class="md-primary">Disabled</md-button>
        <md-button class="md-warn">{{title4}}</md-button>
        <div class="label">Flat</div>
      </section>
      <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
        <md-button class="md-raised">Button</md-button>
        <md-button class="md-raised md-primary">Primary</md-button>
        <md-button ng-disabled="true" class="md-raised md-primary">Disabled</md-button>
        <md-button class="md-raised md-warn">Warn</md-button>
        <div class="label">Raised</div>
      </section>
      <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
        <md-button class="md-fab" aria-label="Eat cake">
          <md-icon md-svg-src="img/icons/cake.svg"></md-icon>
        </md-button>
        <md-button class="md-fab md-primary" aria-label="Use Android">
          <md-icon md-svg-src="img/icons/android.svg"></md-icon>
        </md-button>
        <md-button class="md-fab" ng-disabled="true" aria-label="Comment">
          <md-icon md-svg-src="img/icons/ic_comment_24px.svg"></md-icon>
        </md-button>
        <md-button class="md-fab md-primary md-hue-2" aria-label="Profile">
          <md-icon md-svg-src="img/icons/ic_people_24px.svg"></md-icon>
        </md-button>
        <md-button class="md-fab md-mini" aria-label="Eat cake">
          <md-icon md-svg-src="img/icons/cake.svg"></md-icon>
        </md-button>
        <md-button class="md-fab md-mini md-primary" aria-label="Use Android">
          <md-icon md-svg-src="img/icons/android.svg" style="color: greenyellow;"></md-icon>
        </md-button>
        <div class="label">FAB</div>
      </section>
      <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
        <md-button ng-href="{{googleUrl}}" target="_blank">Default Link</md-button>
        <md-button class="md-primary" ng-href="{{googleUrl}}" target="_blank">Primary Link</md-button>
        <md-button>Default Button</md-button>
        <div class="label">Link vs. Button</div>
      </section>
      <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
        <md-button class="md-primary md-hue-1">Primary Hue 1</md-button>
        <md-button class="md-warn md-raised md-hue-2">Warn Hue 2</md-button>
        <md-button class="md-accent">Accent</md-button>
        <md-button class="md-accent md-raised md-hue-1">Accent Hue 1</md-button>
        <div class="label">Themed</div>
      </section>
      <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
        <md-button class="md-icon-button md-primary" aria-label="Settings">
          <md-icon md-svg-icon="img/icons/menu.svg"></md-icon>
        </md-button>
        <md-button class="md-icon-button md-accent" aria-label="Favorite">
          <md-icon md-svg-icon="img/icons/favorite.svg"></md-icon>
        </md-button>
        <md-button class="md-icon-button" aria-label="More">
          <md-icon md-svg-icon="img/icons/more_vert.svg"></md-icon>
        </md-button>
        <md-button href="http://google.com"
                   title="Launch Google.com in new window"
                   target="_blank"
                   ng-disabled="true"
                   aria-label="Google.com"
                   class="md-icon-button launch" >
          <md-icon md-svg-icon="img/icons/launch.svg"></md-icon>
        </md-button>
        <div class="label">Icon Button</div>
      </section>
    </md-content>
      </div>
  </div>
  </body>
</html>
